<template>
  <div class="lb-wrap" :class="collapse ? 'open-wrap' : ''">
    <lb-head class="lb-head" @handleAccount="handleAccount"></lb-head>
    <div
      class="lb-aside"
      :class="collapse ? 'lb-aside collapse-aside' : 'lb-aside'"
    >
      <vue-scroll :ops="ops">
        <lb-sidebar></lb-sidebar>
      </vue-scroll>
    </div>
    <div class="lb-main">
      <el-main width="100%">
        <transition name="fade" mode="out-in">
          <keep-alive :max="1">
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
        </transition>
        <transition name="fade" mode="out-in">
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </transition>
      </el-main>
    </div>
    <lb-footer
      class="lb-footer"
      :class="collapse ? 'open-footer' : ''"
    ></lb-footer>

    <!-- 编辑账户 -->
    <el-dialog
      title="编辑账户"
      :visible.sync="dialogVisible"
      width="520px"
      :before-close="handleClose"
    >
      <el-form
        @submit.native.prevent
        :model="accountForm"
        :rules="accountFormRules"
        ref="accountForm"
        label-width="120px"
        class="basic-form"
        style="padding-right: 30px"
      >
        <el-form-item label="账号" prop="account">
          <el-input
            v-model="accountForm.account"
            :disabled="true"
            placeholder="账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="原密码" prop="old_passwd">
          <el-input
            v-model="accountForm.old_passwd"
            placeholder="请输入原密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="new_passwd">
          <el-input
            v-model="accountForm.new_passwd"
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="again_passwd">
          <el-input
            v-model="accountForm.again_passwd"
            placeholder="请确认新密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('accountForm')">{{
            $t('action.submit')
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import lbHead from './header.vue'
import lbSidebar from './sidebar.vue'
import lbFooter from './footer'
import bus from './bus.js'
export default {
  data () {
    let validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'))
      } else if (!/^(\S){6,20}$/.test(value)) {
        callback(new Error('请输入6-20位非空白符的字符!'))
      } else {
        callback()
      }
    }
    let validateAgainPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.accountForm.new_passwd) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      collapse: false,
      ops: {
        vuescroll: {
          wheelScrollDuration: 230
        },
        scrollPanel: {
          initialScrollY: false,
          initialScrollX: false,
          scrollingX: false,
          scrollingY: true,
          speed: 2000,
          easing: 'easeInOutQuart',
          verticalNativeBarPos: 'right'
        },
        rail: {
          gutterOfSide: '5px'
        },
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: false,
          keepShow: false,
          background: '#c1c1c1',
          opacity: 0.5,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: '6px',
          disable: false
        }
      },
      dialogVisible: false,
      accountForm: {
        account: window.sessionStorage.getItem('ms_username'),
        old_passwd: '',
        new_passwd: ''
      },
      accountFormRules: {
        old_passwd: {
          required: true,
          type: 'string',
          validator: validatePassword,
          trigger: 'blur'
        },
        new_passwd: {
          required: true,
          type: 'string',
          validator: validatePassword,
          trigger: 'blur'
        },
        again_passwd: {
          required: true,
          type: 'string',
          validator: validateAgainPassword,
          trigger: 'blur'
        }
      }
    }
  },
  components: {
    lbHead,
    lbSidebar,
    lbFooter
  },
  created () {
    bus.$on('collapse', msg => {
      this.collapse = msg
    })
    this.$api.getVersion().then(res => {
      if (res.code === 200) {
        localStorage.setItem('vs', JSON.stringify(res.data))
      }
    })
  },
  mounted () {
    // let that = this
    let token = window.sessionStorage.getItem('lbtk')
    window.onbeforeunload = (e) => {
      var xmlhttp = new XMLHttpRequest() // 创建异步请求
      xmlhttp.open('GET', 'http://longbing.cncnconnect.com/agent/admin/unAuth', false) // 使用POST方法
      xmlhttp.setRequestHeader('toekn', token)
      xmlhttp.send(null)
    }
  },
  methods: {
    handleAccount (flag) {
      this.dialogVisible = flag
    },
    submitForm (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let {
            // eslint-disable-next-line camelcase
            old_passwd,
            // eslint-disable-next-line camelcase
            new_passwd
          } = JSON.parse(JSON.stringify(this.accountForm))
          let admin = {
            old_passwd,
            new_passwd
          }
          this.$api.updatePasswd({
            admin
          }).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successRev'))
              sessionStorage.removeItem('lbtk') // 删除token
              sessionStorage.removeItem('ms_username') // 删除用户名
              this.$router.push('/login')
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.lb-wrap {
  width: 100%;
  height: 100%;
  padding: 70px 0 0 200px;
  transition: padding 0.3s ease-in-out;

  .lb-head {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3000;
  }

  .lb-aside {
    position: fixed;
    top: 70px;
    left: 0;
    z-index: 5;
    height: calc(100vh - 70px);
    background: #2d3a4b;
  }

  .lb-main {
    padding-bottom: 50px;
  }

  .lb-footer {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 200px;
    border-top: 1px solid #ccc;
    background: #fff;
    padding-right: 200px;
    transition: all 0.3s ease-in-out;
  }

  .open-footer {
    left: 64px;
    padding-right: 64px;
  }
}

.open-wrap {
  padding: 70px 0 0 64px;
}

.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.slide-fade-enter-active {
  transition: all 2s ease;
}

.slide-fade-leave-active {
  transition: all 0s ease;
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-leave,
.fade-enter-to {
  opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s;
}
</style>
